<%@ page import="org.w3c.dom.Document" %>
<%@ page import="java.util.List" %>
<%@ page import="java.util.ArrayList" %>
<%@ page import="com.swxc.ssm.po.User" %>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>

<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>课程主页</title>
    <link rel="stylesheet" type="text/css" href="../../../css/course.css">
    <link rel="stylesheet" type="text/css" href="../../../css/course-index.css">
    <link rel="stylesheet" type="text/css" href="../../../css/reset.css">
    <link rel="stylesheet" type="text/css" href="http://at.alicdn.com/t/font_8h2fgrztz6e9izfr.css">
</head>
<body onkeydown="BindEnter(event)">
<!-- 顶部 -->
<div class="c-top">
    <!-- logo -->
    <div class="logo">
        <a href="<%=path%>/course/selectAll.action"><img src="../../../image/logo.jpg"></a>
    </div>
    <!-- top导航 -->
    <div class="topNav-box">
        <ul>
            <li><a href="<%=path%>/course/selectAll.action" class="f-01">课程</a><div class=""></div></li>
            <li><a href="<%=path%>/school/selectAll.action" class="f-01">学校</a><div class=""></div></li>
            <li><a href="" class="f-01">文章</a><div class=""></div></li>
        </ul>
    </div>
    <!-- 搜索框 -->
    <div class="search-box">
        <form class="search-wrap" id="search_course" name="search_course" action="<%=path%>/course/search.action">
            <input class="search-input"  type="text" id="search_input" name="search_input" placeholder="搜索教程"/>
            <input  onclick="search()"  id="enter" name="enter" type="hidden" />
        </form>
    </div>

    <% Object user = request.getSession().getAttribute("user");
        if(user==null ){
    %>
        <!-- 登陆按钮 -->
           <div class="unlogin-box">
                 <a href="<%=path%>/login/toLogin.action" class="f-01">登录 &nbsp;&nbsp;</a>|
                 <a href="<%=path%>/login/toRegister.action" class="f-01">&nbsp;&nbsp; 注册</a>
           </div>

    <% }else{ %>

    <!-- 用户信息 -->
        <div class="login-box">
            <img src="${user.photo}" width="50px" height="50px" alt="" class="user-img">
            <div class="user-operation">
                 <a href="<%=path%>/user/toPersonal.action" class="f-01">个人中心</a>
                 <a href="<%=path%>/login/outLogin.action" class="f-01">退出登录</a>
           </div>
         </div>
    <% } %>

   </div>
   <!-- 主体 -->
<div class="c-container">
    <!-- 课程分类显示 -->
    <div class="c-mainbody">
        <div class="c-mainbody-box">
            <!-- 课程类型分类 -->
            <div class="course-type-box">
                <ul class="course-type-list f-02">

                    <form action="<%=path%>/category/selectByPrimaryKey.action" method="post" name="formList" id="formList">
                        <input type="hidden" name="id" id="formlistid" ></input>
                    </form>

                <c:forEach var="category" items="${requestScope.categorys}" varStatus="cg">
                    <c:forEach var="list_class" items="${requestScope.list_class}" varStatus="lc" begin="${cg.index}" >
                        <c:if test="${lc.index == cg.index}">
                              <li class="course-type"><a  class="f-01" onclick="toList(${category.ID})"><i class="${list_class}"></i>${category.name}</a></li>
                        </c:if>
                    </c:forEach>

                </c:forEach>
                </ul>
            </div>
            <!-- 课程状态分类 -->
            <div class="course-state-list">
                <form action="<%=path%>/course/selectByStatus.action" method="post" name="formStatu" id="formStatu">
                    <input type="hidden" name="id" id="formstatus" ></input>
                </form>
                <ul class="course-state-box f-02">
                    <li class="course-state "><a href="<%=path%>/course/selectAll.action" class="f-01 s-all current">全部</a></li>
                    <li class="course-state "><a onclick="toStatus(1)" class="f-01 s-ing">正在进行</a></li>
                    <li class="course-state "><a onclick="toStatus(0)" class="f-01 s-soon">即将开始</a></li>
                    <li class="course-state "><a onclick="toStatus(2)" class="f-01 s-end">已结束</a></li>
                </ul>
                <ul class="course-sort-box f-02">
                    <li class="course-sort"><a href="" class="f-01 s-syn current">综合排序</a></li>
                    <li class="course-sort"><a href="" class="f-01 s-hot">热门</a></li>
                    <li class="course-sort"><a href="" class="f-01 s-new">最新</a></li>
                </ul>
            </div>
            <!-- 课程列表 -->
            <div class="course-list-box">

                <c:forEach var="course" items="${requestScope.courses}" varStatus="Course" >
                <div class="course-box">

                    <form action="<%=path%>/course/selectByPrimaryKey.action" method="post" name="formInfo" id="formInfo">
                        <input type="hidden" name="id" id="forminfoid" ></input>
                    </form>

                        <div class="img-box">
                            <img src="${course.img}" class="pic" onclick="toInfo(${course.ID})"/>
                        </div>

                    <div class="info-box">
                        <div class="i-title">
                            <a href="course-info.jsp" class="f-01 title" name="id">${course.name}</a>
                            <%--<a href=""  class="f-01 tag">${course.ID}</a>--%>
                        </div>
                        <div class="i-des">
                            <span><a href="" class="f-01 ">${course.teacher.name}</a></span>
                        </div>
                        <div class="i-body">
                            <a  class="f-01 " style="width: 607px;height: 60px;overflow: hidden;" onclick="toInfo(${course.ID})">${course.description}</a>
                        </div>
                        <div class="i-state">
                            <a href="" class="f-01 join-num"><i class="iconfont mooc-ren"></i><span>12306</span>已参加</a>
                            <a href="" class="f-01 curry-time"><i class="iconfont mooc-shijian"></i>进行至第<span>4</span>周</a>
                        </div>

                    </div>
                </div>
                </c:forEach>
            </div>
            <!-- 加载更多 -->
            <div class="conta-left-bottom">
                <span>加载更多课程</span>
            </div>
            <div class="clear"></div>
        </div>
    </div>
    <!-- 热度排行 -->
    <div class="c-siderbar-box ">
        <div class="sid-title"><span>本周课程热度排行</span></div>
        <ul class="f-02">
            <li class="hot-course ">
                <div class="level">1</div>
                <div class="triangle-ft"></div>
                <div class="h-left">
                    <img src="../../../image/course/07-min.png" alt="">
                </div>
                <div class="h-right">
                    <div class="r-t"><a href="course-info.jsp" class="f-01">大学英语（口语）</a></div>
                    <div class="r-b"><a href="" class="f-01 join-num"><i
                            class="iconfont mooc-ren"></i><span>12306</span>已参加</a></div>
                </div>
                <div class="clear"></div>
            </li>
            <li class="hot-course-item">
                <a href="" class="f-01">2.c语言程序设计</a>
            </li>
            <li class="hot-course-item">
                <a href="" class="f-01">3.c语言程序设计</a>
            </li>
            <li class="hot-course-item">
                <a href="" class="f-01">4.c语言程序设计</a>
            </li>
            <li class="hot-course-item">
                <a href="" class="f-01">5.c语言程序设计</a>
            </li>
            <li class="hot-course-item">
                <a href="" class="f-01">6.c语言程序设计</a>
            </li>
            <li class="hot-course-item">
                <a href="" class="f-01">7.c语言程序设计</a>
            </li>
            <li class="hot-course-item">
                <a href="" class="f-01">8.c语言程序设计</a>
            </li>
            <li class="hot-course-item">
                <a href="" class="f-01">9.c语言程序设计</a>
            </li>
            <li class="hot-course-item">
                <a href="" class="f-01">10.c语言程序设计</a>
            </li>
        </ul>
    </div>
    <div class="clear"></div>
</div>
<!-- 底部 -->
<div class="c-footer">MOOC</div>

<script type="text/javascript">
    function toList(categoryid) {
        document.getElementById("formlistid").value=categoryid;
        document.getElementById("formList").submit();
    }
    function toStatus(status) {
        document.getElementById("formstatus").value=status;
        document.getElementById("formStatu").submit();
    }
    function toInfo(courseid){
        document.getElementById("forminfoid").value=courseid;
        document.getElementById("formInfo").submit();
    }
    
    function BindEnter(obj) {
        var button = document.getElementById("enter");
        if(obj.keyCode == 13)
        {
            button.click();
            obj.returnValue = false;
        }
    }
    function search() {
        document.getElementById("search_course").submit();
    }
</script>

<script src="../../../js/jquery.min.js"></script>
<script>
    // img放大特效
    $(function () {
        $w = $('.pic').width();
        $h = $('.pic').height();
        $w2 = $w + 20;
        $h2 = $h + 20;

        $('.course-box').hover(function () {
            $(this).find('.pic').stop().animate({height: $h2, width: $w2, left: "-10px", top: "-10px"}, 500);
        }, function () {
            $(this).find('.pic').stop().animate({height: $h, width: $w, left: "0px", top: "0px"}, 500);
        });
    });
    //用户操作框隐藏|显示
    $(function(){
        $('.login-box').hover(function(){
            $(this).css('background-color','#242528');
            $('.user-operation').css('display','block');
        },function(){
            $(this).css('background-color','#2E323E');
            $('.user-operation').css('display','none');
        });
    });
</script>
</body>
</html>